<template>
  <div v-if="isShow" class="box" @click="close">
    <div class="top"></div>
    <div class="bottom">
      <div class="crossIcon"><van-icon name="cross" /></div>
      <div class="bottom-top">添加到我的小程序</div>
      <div class="bottom-bottom">方便下次使用</div>
    </div>
  </div>
</template>
<script setup>
import { onShow, onHide } from '@dcloudio/uni-app';
import { ref } from 'vue'

const isShow = ref(false)
onShow(() => {
  if (wx.getStorageSync('collectApp') === true) {
    isShow.value = true
  } else {
    isShow.value = false
  }
})
onHide(() => {
  if (wx.getStorageSync('collectApp') === true) {
    isShow.value = true
  } else {
    isShow.value = false
  }
})


const close = () => {
  isShow.value = false
  wx.setStorageSync('collectApp', false)
}
</script>
<style lang="less" scoped>
.box {
  position: absolute;
  top: 12%;
  right: 20rpx;

  .top {
    width: 0;
    height: 0;
    border-right: 25rpx solid transparent;
    border-left: 25rpx solid transparent;
    border-bottom: 25rpx solid var(--a-main-color);
    margin: 0 auto;
  }

  .bottom {
    position: relative;
    width: 297rpx;
    height: 145rpx;
    background: var(--a-main-color);
    border-radius: 25rpx;
    color: #FFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .crossIcon {
      position: absolute;
      font-size: 24rpx;
      top: 5rpx;
      right: 15rpx;
    }

    .bottom-top {
      font-size: 28rpx;
    }

    .bottom-bottom {
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }

}
</style>